<template>
	<view class="page">
		<view class="list">
			<noteCompo @viewCircle="viewCircle" v-for="(note, ind) in notes" :key="ind" :memId="userInfo.id" :note="note"></noteCompo>
		</view>
		
		<view class="footer">
			<button class="publish" @tap="showModal(1)">发布道友记</button>
		</view>
		
		<!--底部抽屉-->
		<view class="mask-screen" @tap="hideModal()" v-show="showModalStatus"></view>
			<view :animation="animationData" class="region-box" v-show="showButton">
				<textarea value="" placeholder="道友时间,说点什么吧" v-model="note.content"/>
				<button class="confirm" @tap="confirm" :disabled="disPub">确认发布</button>
				<view class="cancel" @tap="hideModal()">取消 </view>
			</view>
			<view :animation="animationData" class="region-box-circle" v-show="showCircle">
				<view class="title-box">
					<view v-show="showCircle" class="cirTitle">{{sex == 1 ? '他' : '她'}}的道友圈</view>
				</view>
				<view class="circle-box">
					<view class="circle-out" v-for="(circle, ind) in circles" :key="ind">
						<view class="">
							{{circle.title}}
						</view>
						<button v-if="circle.joinFlag == 0" @tap="joinCircle(circle.id,userInfo.id)" class="join">加入</button>
						<button v-else class="joined">已加入</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import noteCompo from '../../../components/note-compo/note-compo.vue'
	
	export default {
		data() {
			return {
				userInfo: {},
				notes: [],
				showModalStatus: false,
				animationData: "",
				showButton: false,
				showCircle: false,
				note: {
					 content: ''
				},
				sex: 1,
				circles: []
			}
		},
		computed: {
			disPub(){
				if(this.note.content == null || this.note.content.length < 1){
					return true;
				}
				return false;
			}
		},
		onShow() {
			this.userInfo = this.getGlobalUser("globalUser");
			this.getNotes();
		},
		methods: {
			joinCircle(circleId, memId){
				this.$apis.joinCircle({memId: memId, circleId: circleId}).then((res) => {
					for (var i = 0; i < this.circles.length; i++) {
						if(this.circles[i].id == circleId){
							this.circles[i].joinFlag = 1;
						}
					}
				});
			},
			viewCircle(e){
				this.sex = e.sex;
				this.$apis.getOtherMemCircle({memId: e.publUser, myId: this.userInfo.id}).then((res) => {
					this.circles = res;
				});
				this.showModal();
			},
			confirm(){
				var me = this;
				this.note.publUser = this.userInfo.id;
				this.note.pubAddress = this.userInfo.locateAddress;
				this.$apis.saveNote(this.note).then((res) => {
					this.hideModal();
					this.getNotes();
				});
			},
			showModal: function(e) {
				// 显示遮罩层
				// 创建动画实例 
				let animation = uni.createAnimation({
					duration: 200,
					timingFunction: "linear",
					delay: 0
				})
				// animation.translateY(uni.upx2px(712)).step()
				this.animationData = animation.export();
				this.showModalStatus = true
				if(e == 1){
					this.showButton = true;
				}else {
					this.showCircle = true;
				}
				setTimeout(function() { 
					animation.translateY(0).step();
					this.animationData = animation.export();
				}.bind(this), 200);
			},
			hideModal: function(e) {
				this.showModalStatus = false;
				this.showButton = false;
				this.showCircle = false;
			},
			getNotes(){
				this.$apis.getNotes({memId: this.userInfo.id}).then((res) => {
					this.notes = res;
				});
			}
		},
		components: {
			noteCompo
		}
	}
</script>

<style>
	@import url("../../../static/iconfont/iconfont.css");
	@import url("./note.css");
</style>
